<template>
  <div class="layer-management">
    <div class="header">
      <span class="title">图层管理</span>
    </div>

    <div class="body">
      <el-tree
        ref="treeRef"
        :data="treeData"
        show-checkbox
        node-key="pkid"
        :default-checked-keys="checkedKeys"
        :check-strictly="true"
        :render-content="renderContent"
        @check="handleCheck"
      />
    </div>
  </div>
</template>

<script>
import { queryRightTree } from '@/api/question'
import emitter from '@/utils/event-bus'


export default {
  props: {
    mapId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      treeData: [
        {
          pkid: '1',
          name: '建筑',
          children: []
        },
        {
          pkid: '2',
          name: '小区边界',
          children: []
        },
        {
          pkid: '300',
          name: '社区边界',
          children: []
        },
        {
          pkid: 'bj',
          name: '区县边界',
          url: window.BOUND_LAYER_URL,
          children: []
        }
      ],
      currentKey: null,
      activeName: 'sq',
      oldCheckList: [],
      defaultId: '1',
      checkedKeys: []
    }
  },
  mounted() {
    this.defaultCheck()
  },
  methods: {
    defaultCheck() {
      this.checkedKeys = [this.defaultId, 'bj']
      this.$nextTick(() => {
        this.$refs.treeRef.setChecked(this.defaultId, true, false)
        this.$refs.treeRef.setChecked('bj', true, false)
        this.handleCheck({ pkid: this.defaultId }, {
          checkedKeys: this.checkedKeys
        })
        this.handleCheck({ pkid: 'bj', url: window.BOUND_LAYER_URL }, {
          checkedKeys: this.checkedKeys
        })
      })
    },

    diff(arr1, arr2) {
      let add = [...arr2.filter((x) => !arr1.includes(x))]
      let del = [...arr1.filter((x) => !arr2.includes(x))]
      return { add, del }
    },

    handleCheck(data, checked) {
      if (data.pkid === '1') {
        const isChecked = checked.checkedKeys.includes(data.pkid)
        this.$emit('node-check', isChecked)
        emitter.emit('TOGGLE_SPECIAL_LAYER', isChecked)
      } else if (data.url) {
        const isChecked = checked.checkedKeys.includes(data.pkid)
        emitter.emit('TOGGLE_URL_LAYER', { pkid: data.pkid, isChecked, url: data.url })
      } else {
        // this.noneClick()
        const checkedKeys = checked.checkedKeys
        const { add, del } = this.diff(this.oldCheckList, checkedKeys)
        emitter.emit('TOGGLE_SERVICE', {
          addIds: add.filter((i) => i !== this.defaultId && i !== 'bj'),
          removeIds: del,
          type: 'layer'
        })

        this.oldCheckList = [...checkedKeys]
      }
    },

    // 自定义节点渲染函数
    renderContent(h, { data }) {
      return h('span', {
        style: { marginLeft: '8px' }
      }, data.name)
    },
  },
}
</script>

<style lang="scss" scoped>
.layer-management {
  $primary-color: #006fff;
  display: flex;
  flex-direction: column;

  user-select: none;

  width: 290px;

  .header {
    align-items: center;

    padding: 13px 18px;
    border-bottom: 1px solid #f3f3f9;

    span.title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 14px;
      color: black;
    }
  }

  .body {
    display: flex;
    flex-direction: column;

    flex: 1;
    padding: 9px 0 9px 14px;
    overflow: auto;

    :deep(.el-scrollbar) {
      flex: 1;
      width: 100%;

      .el-scrollbar__wrap {
        .el-scrollbar__view {
          padding-right: 14px;
        }
      }

      .layer-item {
        display: flex;
        flex-direction: column;

        &:not(:first-of-type) {
          margin-top: 10px;
        }

        .row {
          display: flex;
          align-items: center;

          .layer-name {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            flex: 1;
            font-size: 14px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            line-height: 14px;
            color: black;
          }

          .visible {
            width: 18px;
            height: 18px;
            margin-left: 10px;
            cursor: pointer;

            & > i {
              width: 100%;
              height: 100%;
              cursor: pointer;

              &:hover {
                color: $primary-color;
              }
            }
          }

          .opacity {
            width: 18px;
            height: 18px;
            margin-left: 10px;
            color: black;
            cursor: pointer;

            &.show {
              color: $primary-color;
            }

            &.disable {
              cursor: not-allowed;
            }
          }
        }

        .el-slider {
          margin-top: 5px;
          padding: 0 12px;
        }

        .children {
          display: flex;
          flex-direction: column;

          margin-top: 5px;
          padding: 6px;
          background-color: #8c939d33;
          border-radius: 4px;

          .child {
            align-items: center;

            &:not(:first-of-type) {
              margin-top: 5px;
            }

            .svg-icon {
              width: 16px;
              height: 16px;
              color: #333;
            }

            .child-layer-name {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              flex: 1;
              margin-left: 10px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              line-height: 14px;
              color: #333;
            }
          }
        }
      }
    }
  }
}
</style>
